<template>
    <div>
        <el-card shadow="always">
            <SelecterCategory @CategoryInfo="CategoryInfo" :isShowAttrList="isShowAttrList"></SelecterCategory>
        </el-card>
        <el-card style="margin-top:20px">
            <div v-show="isShowAttrList">
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    :disabled="!category3Id"
                    @click="changeIsShowAttrList1"
                >添加属性</el-button>
                <el-table :data="categoryInfoList" style="width: 100%;margin-top:20px" border>
                    <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
                    <el-table-column prop="attrName" label="属性名称" width="150"></el-table-column>
                    <el-table-column label="属性列表" width="width">
                        <template slot-scope="{row}">
                            <el-tag
                                type="success"
                                v-for="attrValue in row.attrValueList"
                                :key="attrValue.id"
                            >{{ attrValue.valueName }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="prop" label="操作" width="150">
                        <template slot-scope="{row}">
                            <el-tooltip effect="light" content="修改" placement="top">
                                <el-button
                                    type="warning"
                                    size="mini"
                                    icon="el-icon-edit"
                                    @click="updateAttr(row)"
                                ></el-button>
                            </el-tooltip>
                            <el-tooltip effect="light" content="删除" placement="top">
                                <el-button
                                    type="danger"
                                    @click="deleteAttrInfo(row)"
                                    size="mini"
                                    icon="el-icon-delete"
                                ></el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-show="!isShowAttrList">
                <el-form :model="categoryInfo" :inline="true" class="demo-form-inline">
                    <el-form-item label="属性名">
                        <el-input v-model="categoryInfo.attrName" placeholder="请输入属性名"></el-input>
                    </el-form-item>
                </el-form>
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    :disabled="attrNameDisable"
                    @click="addAttrInfo"
                >添加属性名</el-button>
                <el-button @click="changeIsShowAttrList2">取消</el-button>
                <el-table
                    :data="categoryInfo.attrValueList"
                    style="width: 100%;margin-top:20px"
                    border
                >
                    <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
                    <el-table-column label="属性值名称" width="width">
                        <template slot-scope="{row,$index}">
                            <!-- input,用来编辑使用,获取光标的位置,只能在input标签,点击可以在input或者span上面点击 -->
                            <el-input
                                :ref="$index"
                                v-if="row.isEdit"
                                size="mini"
                                v-model="row.valueName"
                                placeholder="请输入属性值名称"
                                @blur="mouseLeave(row)"
                                @keyup.enter.native="mouseLeave(row)"
                            ></el-input>
                            <!-- span,用来展示 点击是将span变成input,让用户编辑,
                                所以,我们改变isEdit,将他改变成true
                            -->
                            <span
                                v-else
                                @click="changeIsEdit(row, $index)"
                                style="display: block; width: 100%;height:40px"
                            >{{ row.valueName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="prop" label="操作" width="width">
                        <template slot-scope="{row,$index}">
                            <el-tooltip effect="dark" content="删除" placement="right-end">
                                <el-button
                                    icon="el-icon-delete"
                                    type="danger"
                                    @click="deleteAttrList(row, $index)"
                                ></el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button
                    type="primary"
                    @click="save"
                    :disabled="categoryInfo.attrValueList.length === 0"
                >保存</el-button>
                <el-button @click="changeIsShowAttrList2">取消</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>

import cloneDeep from 'lodash/cloneDeep'
import uniqWith from 'lodash/uniqWith'
import isEqual from 'lodash/isEqual'
export default {
    name: 'Attr',
    data() {
        return {
            category1Id: "",
            category2Id: "",
            category3Id: "",
            categoryInfoList: [],

            /* 
                vue数据代码,数据劫持,数据绑定...
             */
            /* 是否显示属性列表,
                如果显示的列表页,true,
                添加或修改页false */
            isShowAttrList: true,
            /* 添加的数据收集 */
            categoryInfo: {
                attrName: "",//双向绑定
                attrValueList: [
                    // {
                    //     attrId: 0,
                    //     // id": 0,
                    //     valueName: "string"
                    // },
                    // {
                    //     attrId: 0,
                    //     // id": 0,
                    //     valueName: "string"
                    // }
                ],
                categoryId: '',//三级分类的id       对象的属性是没有顺序的
                categoryLevel: 3,
            }
        }
    },
    methods: {
        CategoryInfo(category) {
            let { categoryid, level } = category;
            if (level == 1) {
                this.category1Id = categoryid
                this.category2Id = ""
                this.category3Id = ""
                this.categoryInfoList = []
            } else if (level == 2) {
                this.category2Id = categoryid
                this.category3Id = ""
                this.categoryInfoList = []
            } else {
                this.category3Id = categoryid
                /* 发送ajax,获取属性列表信息 */
                this.getAttr()
            }
        },
        /* 删除属性信息 */
        deleteAttrInfo(row) {
            this.$confirm(`您确定要删除${row.attrName}吗?`, '温馨提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const result = await this.$API.attr.deleteAttr(row.id)
                if (result.code === 200 || result.code === 20000) {
                    this.getAttr();
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        /* 发送ajax,获取怇 */
        async getAttr() {
            let category = {
                category1Id: this.category1Id,
                category2Id: this.category2Id,
                category3Id: this.category3Id,
            }
            // console.log(category);
            const result = await this.$API.attr.getAttrInfoList(category)
            if (result.code == 200 || result.code == 20000) {
                this.categoryInfoList = result.data
            }
        },
        /* 添加一行数据并且改变属性列表页是否显示 */
        /* 外面的添加属性的那个按钮,点击这个我们在
           这里面收集的数据
                attrName
                attrValueList:[]        我们在添加属性的按钮当中是没有办法收集的
                categoryId: this.category3Id    //子组件传递过来,所以当在子组件当中一点击三级分类change事件,父组件就有了
                categoryLevel           死数据
        */
        changeIsShowAttrList1() {
            /* 关闭列表页,打开添加页 */
            this.isShowAttrList = false;

            let categoryInfo = {
                attrName: this.categoryInfo.attrName,
                attrValueList: [//占位思想
                    // {
                    //     "attrId": 0,
                    //     "id": 0,
                    //     "valueName": "string"
                    // }
                ],
                categoryId: this.category3Id,//三级分类的id
                categoryLevel: 3,
            }
            this.categoryInfo = categoryInfo
        },
        changeIsShowAttrList2() {
            /* 打开列表页,关闭添加或者修改页 */
            this.isShowAttrList = true;
            /* 清空添加页中的数据 */
            this.clearAttrList();
        },
        /* 添加属性名 */
        addAttrInfo() {
            /* 这里面收集的是
                就是属性值列表的数据,点击外面的这个添加按钮的时候是没有办法来收集这个属性值列表的
                所以在这里面来收集
            */
            this.categoryInfo.attrValueList.push({
                attrId: this.categoryInfo.id,
                valueName: "",

                /* 控制是否是展示数据还是编辑数据 */
                isEdit: true//表示为添加,编辑数据
            })
            /* 
                让我们的属性列表的最后一个获取光标
            */
            this.$nextTick(() => {
                this.$refs[this.categoryInfo.attrValueList.length - 1].focus()
            })
        },
        /* 
            删除属性列表
        */
        deleteAttrList(row, index) {
            // console.log(row, index);
            // this.categoryInfo.attrValueList = this.categoryInfo.attrValueList.filter(item => item.valueName != row.valueName)

            this.categoryInfo.attrValueList.splice(index, 1)
        },
        /* 发送ajax */
        async save() {
            const isEmpty = this.categoryInfo.attrValueList.some(item => item.valueName.trim() == '')
            if (isEmpty) {
                return this.$message.warning("属性值列表中的数据不能为空!")
            }

            /* 使用lodash进行对象数组去重 */
            this.categoryInfo.attrValueList = uniqWith(this.categoryInfo.attrValueList, isEqual)

            const result = await this.$API.attr.saveAttrInfo(this.categoryInfo)
            // console.log(result);
            if (result.code === 200 || result.code == 20000) {
                /* 清空添加属性 */
                this.clearAttrList();
                /* 显示列表页,关闭的添加页 */
                this.isShowAttrList = true
                /* 重新获取一些列表页数据 */
                this.getAttr();
            }
        },
        /* 清空属性列表 */
        clearAttrList() {
            this.categoryInfo = {
                attrName: "",//双向绑定
                attrValueList: [
                ],
                categoryId: '',//三级分类的id       对象的属性是没有顺序的
                categoryLevel: 3,
            }
        },
        /* 修改属性 */
        updateAttr(row) {
            /* 
                一般情况下,展示数据与编辑数据
                    展示数据(老数据)        一般是作为展示使用的
                        一般不能让别人编辑
                        一般使用span
                    编辑数据(新数据)        一般是作为编辑使用的
                        一般一来就是让别人编辑的
                        一般使用input
            */
            /* 
                将isEdit,修改成false,表示展示数据
            */

            /* 打开添加或者修改页面 */
            this.isShowAttrList = false
            // console.log(row);
            // this.categoryInfo = { ...row }
            this.categoryInfo = cloneDeep(row)//深拷贝

            // this.categoryInfo.attrValueList.forEach(item => item.isEdit = false)
            /* 改成响应式 参数的说明 object,'propertyName',propertyValue */
            this.categoryInfo.attrValueList.forEach(item => this.$set(item, 'isEdit', false))
        },
        /* 改变编辑添加或者修改的编辑状态 */
        changeIsEdit(row, index) {

            /**
             * 数据驱动视图
             *      对于这个数组的来讲,使用到了
                        push()
                        pop()
                        shift()
                        unshift()
                        splice()
                        sort()
                        reverse()
                        那么他一定是响应是的
                    对于我们的对象来讲
                        data当中的数据是响应式的
                        他是一来就存在,他都有get/set方法,一旦更新data当中的数据,所以能够触发我们的视图更新
                        data当中的数据,不管是外层的数据,还是内层的数据,都是get/set
             */
            // console.log(row);
            // alert("让他可以修改")
            row.isEdit = true

            /* 获取光标  nextTick 最近的一次dom更新*/
            this.$nextTick(() => {
                this.$refs[index].focus()
            })
        },

        /* input 鼠标离开事件 让他变成span,做了响应式数据*/
        mouseLeave(row) {
            row.isEdit = false
        }
    },
    computed: {
        attrNameDisable() {
            return !this.categoryInfo.attrName.length > 0
        }
    }

};
</script>

<style lang='scss' scoped>
</style>
